<template>
    <div class="blogProject-shop-container">
        <Header></Header>
        <div class="blogProject-shop-container-content">
            <div class="scrolling-notice-container">
                <div class="scrolling-notice-content">
                    <span class="notice-item">
                        <el-blogTag style="margin-right: 5px;">通知</el-blogTag>
                        <span>需要项目定做的可以添加QQ：2770063826</span>
                    </span>
                </div>
            </div>
            <div class="search-container">
                <el-form class="search-form" :model="searchForm" label-width="100px" @submit.native.prevent>
                    <el-form-item label="毕设标题">
                        <el-input v-model="searchForm.title" placeholder="请输入毕设标题" @change="getProjectList"></el-input>
                    </el-form-item>
                </el-form>
                <el-form class="search-form" :model="searchForm" label-width="100px" :inline="true">
                    <el-form-item label="支持修改">
                        <el-switch v-model="searchForm.isUpdate" :active-value="1" :inactive-value="2"
                            @change="getProjectList"></el-switch>
                    </el-form-item>
                    <el-form-item label="支持部署">
                        <el-switch v-model="searchForm.isDeploy" :active-value="1" :inactive-value="2"
                            @change="getProjectList"></el-switch>
                    </el-form-item>
                    <el-form-item label="支持讲解">
                        <el-switch v-model="searchForm.isTeach" :active-value="1" :inactive-value="2"
                            @change="getProjectList"></el-switch>
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="projectList" stripe style="width: 100%" v-loading="loading">
                <el-table-column prop="title" label="毕设标题" align="center">
                    <template #header>
                        <el-tooltip content="毕设标题" placement="top">
                            <span>毕设标题</span>
                        </el-tooltip>
                    </template>
                    <template slot-scope="scope">
                        <span class="title-text" @click="$router.push(`/blog/project_shop/${scope.row.projectId}`)">
                            {{ scope.row.title }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="isEdit" width="80" align="center">
                    <template #header>
                        <el-tooltip content="支持二次开发/修改/定制" placement="top">
                            <span>支持修改</span>
                        </el-tooltip>
                    </template>
                    <template slot-scope="scope">
                        <el-icon v-if="scope.row.isUpdate === 1" class="el-icon-check"></el-icon>
                        <el-icon v-else class="el-icon-close"></el-icon>
                    </template>
                </el-table-column>
                <el-table-column prop="isDeploy" width="80" align="center">
                    <template #header>
                        <el-tooltip content="支持远程部署/安装/调试" placement="top">
                            <span>支持部署</span>
                        </el-tooltip>
                    </template>
                    <template slot-scope="scope">
                        <el-icon v-if="scope.row.isDeploy === 1" class="el-icon-check"></el-icon>
                        <el-icon v-else class="el-icon-close"></el-icon>
                    </template>
                </el-table-column>
                <el-table-column prop="isTeach" width="80" align="center">
                    <template #header>
                        <el-tooltip content="支持1v1讲解" placement="top">
                            <span>支持讲解</span>
                        </el-tooltip>
                    </template>
                    <template slot-scope="scope">
                        <el-icon v-if="scope.row.isTeach === 1" class="el-icon-check"></el-icon>
                        <el-icon v-else class="el-icon-close"></el-icon>
                    </template>
                </el-table-column>
                <el-table-column prop="nickName" width="150" align="center">
                    <template #header>
                        <el-tooltip content="作者昵称" placement="top">
                            <span>作者昵称</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="viewsCount" width="80" align="center">
                    <template #header>
                        <el-tooltip content="浏览量" placement="top">
                            <span>浏览量</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="price" width="80" align="center">
                    <template #header>
                        <el-tooltip content="价格" placement="top">
                            <span>价格</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" width="150" align="center">
                    <template #header>
                        <el-tooltip content="创建时间" placement="top">
                            <span>创建时间</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                    :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import Header from '../components/header/index.vue';
import { listFrontProject } from '@/api/blog/blogProject';

export default {
    name: 'blog-blogProject-list',
    components: {
        Header
    },
    data() {
        return {
            projectList: [],
            total: 1000,
            pageSize: 20,
            currentPage: 1,
            searchForm: {
                title: null,
                isUpdate: 1,
                isDeploy: 1,
                isTeach: 1,
            },
            loading: false,
        }
    },
    mounted() {
        this.getNotice();
        this.getProjectList();
    },
    methods: {
        getNotice() {
        },
        getProjectList() {
            this.loading = true;
            listFrontProject(this.searchForm).then((res) => {
                this.projectList = res.rows;
                this.total = res.total;
                this.loading = false;
            });
        },
        handleCurrentChange(page) {
            this.currentPage = page;
        },
    }
}
</script>

<style scoped>
.blogProject-shop-container {
    min-height: 100vh;
    background-color: rgb(241, 242, 245);
}

.pagination {
    margin: 20px 0;
    text-align: center;
}

.blogProject-shop-container-content {
    background-color: #fff;
    box-shadow: 0 2px 5px 0 hsla(0, 0%, 57%, .1);
}

.title-text {
    cursor: pointer;
}

.title-text:hover {
    color: #409EFF;
}

@media screen and (max-width: 1000px) {
    .blogProject-shop-container-content {
        width: 100%;
        height: 100%;
    }
}

@media screen and (min-width: 1001px) {
    .blogProject-shop-container-content {
        width: 1200px;
        height: 100%;
        padding: 20px;
        margin: 20px auto;
    }
}

.scrolling-notice-container {
    background-color: #f4f4f5;
    padding: 10px 0;
    overflow: hidden;
    width: 100%;
    margin-bottom: 10px;
}

.scrolling-notice-content {
    display: inline-block;
    white-space: nowrap;
}

.notice-item {
    display: inline-block;
    padding: 0 20px;
    color: #606266;
    font-size: 14px;
}
</style>
